<template>
	<view>
		<view class="taskD_header">
			<view class="flex2">
				<view class="taskD_header_l">{{taskinfo.taskName}}</view>
				<view class="taskD_header_r">更新至 {{nowtime}}</view>
			</view>
		    <view class="flex2 taskD_header_b">
				<view class="flex">
				   <!-- <uni-icons type="bottom" size="15"></uni-icons> -->
				   <view class="taskD_header_time">距离结束
				   <uni-countdown :show-colon="false" color="#f8c94e" v-if="taskinfo.taskModel"  :day="taskinfo.timeout.day" :hour="taskinfo.timeout.hour" :minute="taskinfo.timeout.min" :second="taskinfo.timeout.secord"></uni-countdown>
				   </view>
				   <!-- <uni-icons type="bottom" size="15" color="#ee212d"></uni-icons> -->
				</view>
				<!-- <view class="taskD_header_button flex3">
					查看详情
				</view> -->
			</view>
		</view>
		<view class="flex2 show">
			<view>以下仅展示任务参与范围内自己管理负责的区域数据统计</view>
			<view style="color: #f8c94e;">操作</view>
		</view>
		<view class="taskD_Number">
			<view class="flex2 taskD_Number_title">
				<view class="taskD_Number_title_l">任务完成情况</view>
				<uni-icons type="right" size="20" color="#656565"></uni-icons>
			</view>
			<view class="taskD_Num flex2">
				<view class="taskD_Num_d">
					<view>完成人数</view>
					<view>{{taskinfo.completedNum}}</view>
				</view>
				<view class="taskD_Num_d">
					<view>未完成人数</view>
					<view>{{taskinfo.unCompletedNum}}</view>
				</view>
				<view class="taskD_Num_d">
					<view>完成率</view>
					<view>{{((taskinfo.completedNum/taskinfo.executorList.length)*100).toFixed(1)}}<i class="icon">%</i></view>
				</view>
				
			</view>
		</view>
		<view class="complete_box">
			<view class="flex2 taskD_Number_title">
				<view class="taskD_Number_title_l">指标完成情况</view>
			</view>
			<view class="zhibiao" style="overflow: auto;  display: -webkit-flex;  display: flex;">
				<view :class="num==index?'active flex2 complete_iamge':'flex2 complete_iamge'"  v-for="(item,index) in taskinfo.indexList" :key="index" @click="changeitem(index)">
					<view  class="complete_iamge_l flex">
						<view class="complete_iamge_l_num ">
							<u-circle-progress border-width="10" width="113" inactive-color="#fff" bg-color="rgba(0,0,0,0)" active-color="#feaf22" :percent="((item.allcomplete/item.allnum)*100).toFixed(1)*1">
								<view class="u-progress-content">
									<!-- <view class="u-progress-dot"></view> -->
									<text class='u-progress-info'>{{((item.allcomplete/item.allnum)*100).toFixed(1)}}%</text>
								</view>
							</u-circle-progress>
						</view>
						<view class="complete_iamge_l_right">
							<view class="name">
								{{item.indexTitle}}
							</view>
							<view class="complete">
								<span>已完成</span>
								<span>{{item.allcomplete}}</span>
							</view>
							<view class="allcomplete">
								 <span>总目标值</span>
								 <span>{{item.allnum}}</span>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="complete">
			<view class="flex ">
				<view>商户完成情况</view>
				<uni-icons type="bottom" size="15" color="#656565"></uni-icons>
			</view>
			<view class="flex">
				<view class="statistics complete_l">
					<view>{{indexListitem.totalNumberPeople}}</view>
					<view>全部</view>
					<view>(考核对象)</view>
				</view>
				<view class="complete_line"></view>
				<view class="statistics flex2 complete_r">
					<view class="complete_r_item"> 
						<view>已参与</view>
						<view>{{indexListitem.participationNum}}</view>
					</view>
					<view class="complete_r_item">
						<view>未参与</view>
						<view>{{(indexListitem.totalNumberPeople-indexListitem.participationNum)}}</view>
					</view>
					<view class="complete_r_item">
						<view>参与率</view>
						<view>{{((indexListitem.participationNum/indexListitem.totalNumberPeople)*100).toFixed(1)}}%</view>
					</view>
					<view class="complete_r_item">
						<view>已完成</view>
						<view>{{indexListitem.completedNum}}</view>
					</view>
					<view class="complete_r_item">
						<view>未完成</view>
						<view>{{(indexListitem.totalNumberPeople-indexListitem.completedNum)}}</view>
					</view>
					<view class="complete_r_item">
						<view>完成率</view>
						<view>{{((indexListitem.completedNum/indexListitem.totalNumberPeople)*100).toFixed(1)}}%</view>
					</view>
				</view>
			</view>
			<view class="horizontal_line"></view>
			<view>
				<view class="flex2">
					<view class="shops">商户名称</view>
					<view class="shops">已完成指标</view>
					<view class="shops">完成率</view>
				</view>
				<view class="flex2" v-for="(item,index) in indexListitem.businessOwnersDetailList" :key="index" @click="tostaffinfo(item)">
					<view class="shops">{{item.userName}}</view>
					<view class="shops flex">
						<text>{{item.completedIndexNum}}/{{item.targetIndexNum}}</text>
						 <view style="width: 150rpx;margin-left: 20rpx;" >
							<progress :percent="((item.completedIndexNum/item.targetIndexNum)*100).toFixed(1)"  activeColor="rgb(238,33,45)" stroke-width="8" :border-radius='50'/>
						 </view>
					</view>
					<view class="shops">{{((item.completedIndexNum/item.targetIndexNum)*100).toFixed(1)}}%</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniCountdown from "../uni-countdown/components/uni-countdown/uni-countdown.vue"
	export default {
		components:{
			uniCountdown
		},
		data() {
			return {
				taskinfo:{
					taskName:'1110测试项目',
					taskModel:1,
					completedNum:2,
					unCompletedNum:10,
					executorList:[
						{
							name:1
						},
						{
							name:1
						},
						{
							name:1
						}
					],
					indexList:[
						{
							
							indexTitle:'转发商品',
							totalNumberPeople:12,
							participationNum:10,
							completedNum:10,
							totalNumberPeople:12,
							businessOwnersDetailList:[
								{
									userName:'海河',
									targetIndexNum:11,
									completedIndexNum:6
								}
							]
						},
						{
							
							indexTitle:'转发视频',
							totalNumberPeople:12,
							participationNum:10,
							completedNum:10,
							totalNumberPeople:12,
							businessOwnersDetailList:[
								{
									userName:'江湖',
									targetIndexNum:12,
									completedIndexNum:10
								},
								
							]
						}
					]
				},//all
				indexListitem:{
					totalNumberPeople:12,
					participationNum:10,
					completedNum:10,
					totalNumberPeople:12,
					businessOwnersDetailList:[
						{
							userName:'江湖',
							targetIndexNum:12,
							completedIndexNum:10
						}
					]
				},//单个指标
				num:0,
				nowtime:null,
				weekmouth:{},
				day:0
			};
		},
		onLoad(e) {
			setTimeout(()=>{
			  uni.setNavigationBarTitle({
						   title: this.$L('任务详情')
						});
			},0);
			 // 获取当前时间
			 this.nowtime=this.timechange(new Date().getTime())
			  
			this.getcompleteinfo(e)
			 this.weekmouth= this.getweekmouth()
		},
		methods:{
			//获取详情
			 getcompleteinfo(val){
				this.$request({
					url:'v3/task/front/appTask/rate/'+val.id
				}).then( res=>{
					this.taskinfo=res.data
					if(this.taskinfo.taskModel==0){
													// 阶段性任务
						this.taskinfo.timeout=  this.gettimestage(new Date(),this.taskinfo.endTime)
						 console.log(this.taskinfo.timeout);
					 }else if(this.taskinfo.taskModel==1){
					    this.taskinfo.timeout=this.getdaystage()
						 console.log(this.taskinfo.timeout);
					 }else if(this.taskinfo.taskModel==2){
						 this.taskinfo.timeout=this.getweekstage()
						 console.log(this.taskinfo.timeout);
					}else if(this.taskinfo.taskModel==3){
						  this.taskinfo.timeout= this.getmouth()
					 }
					// 未完成人数
					this.taskinfo.unCompletedNum=this.taskinfo.executorList.length-Number(this.taskinfo.completedNum)
				     // 默认显示第一个指标
					 this.indexListitem=this.taskinfo.indexList[0]
					 // 计算指标总完成
					 this.taskinfo.indexList.forEach(item=>{
						 item.allnum=0
						 item.allcomplete=0
						 item.businessOwnersDetailList.forEach(val=>{
							 item.allnum+=Number(val.targetIndexNum)
							 item.allcomplete+=Number(val.completedIndexNum)
						 })
					 })
				})
			},
			// 切换查看指标
			changeitem(index){
				this.indexListitem=this.taskinfo.indexList[index]
				this.num=index
			},
			tostaffinfo(val){
				// 员工完成详情
				let item=this.taskinfo.indexInfoList[this.num]
				item.userId=val.userId
				uni.navigateTo({
					url:"/standard/stafftaskinfo/stafftaskinfo?item="+encodeURIComponent(JSON.stringify(item))
				})
			},
			// 倒计时
			gettime(){
				let nowtime=new Date()
				let dayout=this.newDate(nowtime)+' '+'23:59:59'
			   // 当天剩余时间 24*60*60
			   let daytime=new Date(dayout).getTime()-nowtime.getTime()
			   // d
			  let day= daytime/(24*60*60*1000)<0?0: Math.floor((daytime/(24*60*60*1000)))
			  // h
			  let hour=(daytime-(day*24*60*60*1000))/(60*60*1000)<0?0:Math.floor((daytime-(day*24*60*60*1000))/(60*60*1000))
			  // m
			  let min=(daytime-((day*24+hour)*60*60*1000))/(60*1000)<0?0:Math.floor((daytime-((day*24+hour)*60*60*1000))/(60*1000))
			  // s
			  let scord=(daytime-((day*24*60+hour*60+min)*60*1000))/(1000)<0?0:Math.floor((daytime-((day*24*60+hour*60+min)*60*1000))/(1000))
			 
			  return {day,hour,min,min,scord}
			  
			},
			// 阶段性任务倒计时
			gettimestage(start,end){
				let nowtime=new Date(start)
				let dayout=this.newDate(end)
				// 剩余时间
				 let daytime=new Date(dayout).getTime()-nowtime.getTime()
				 // d
				let day= daytime/(24*60*60*1000)<0?0: Math.floor((daytime/(24*60*60*1000)))
				// h
				let hour=(daytime-(day*24*60*60*1000))/(60*60*1000)<0?0:Math.floor((daytime-(day*24*60*60*1000))/(60*60*1000))
				// m
				let min=(daytime-((day*24+hour)*60*60*1000))/(60*1000)<0?0:Math.floor((daytime-((day*24+hour)*60*60*1000))/(60*1000))
				// s
				let scord=(daytime-((day*24*60+hour*60+min)*60*1000))/(1000)<0?0:Math.floor((daytime-((day*24*60+hour*60+min)*60*1000))/(1000))
							 
				return {day,hour,min,min,scord}
			},
			
			getdaystage(){
				let nowtime=new Date()
				let dayout=this.newDate(nowtime)+ ' '+'23:59:59'
				// 剩余时间
				 let daytime=new Date(dayout).getTime()-nowtime.getTime()
				 // d
				let day= daytime/(24*60*60*1000)<0?0: Math.floor((daytime/(24*60*60*1000)))
				// h
				let hour=(daytime-(day*24*60*60*1000))/(60*60*1000)<0?0:Math.floor((daytime-(day*24*60*60*1000))/(60*60*1000))
				// m
				let min=(daytime-((day*24+hour)*60*60*1000))/(60*1000)<0?0:Math.floor((daytime-((day*24+hour)*60*60*1000))/(60*1000))
				// s
				let scord=(daytime-((day*24*60+hour*60+min)*60*1000))/(1000)<0?0:Math.floor((daytime-((day*24*60+hour*60+min)*60*1000))/(1000))
							 
				return {day,hour,min,min,scord}
			},
			// 每周任务
			getweekstage(){
				
				let nowtime=new Date()
				let dayout=this.newDate(this.weekmouth.lastDayOfWeek)+ ' '+'23:59:59'
				// 剩余时间
				 let daytime=new Date(dayout).getTime()-nowtime.getTime()
				 // d
				let day= daytime/(24*60*60*1000)<0?0: Math.floor((daytime/(24*60*60*1000)))
				// h
				let hour=(daytime-(day*24*60*60*1000))/(60*60*1000)<0?0:Math.floor((daytime-(day*24*60*60*1000))/(60*60*1000))
				// m
				let min=(daytime-((day*24+hour)*60*60*1000))/(60*1000)<0?0:Math.floor((daytime-((day*24+hour)*60*60*1000))/(60*1000))
				// s
				let scord=(daytime-((day*24*60+hour*60+min)*60*1000))/(1000)<0?0:Math.floor((daytime-((day*24*60+hour*60+min)*60*1000))/(1000))
							 
				return {day,hour,min,min,scord}
			},
			// 每月任务倒计时
			getmouth(){
				let nowtime=new Date()
				let dayout=this.newDate(this.weekmouth.lastDay)+ ' '+'23:59:59'
				// 剩余时间
				 let daytime=new Date(dayout).getTime()-nowtime.getTime()
				 // d
				let day= daytime/(24*60*60*1000)<0?0: Math.floor((daytime/(24*60*60*1000)))
				// h
				let hour=(daytime-(day*24*60*60*1000))/(60*60*1000)<0?0:Math.floor((daytime-(day*24*60*60*1000))/(60*60*1000))
				// m
				let min=(daytime-((day*24+hour)*60*60*1000))/(60*1000)<0?0:Math.floor((daytime-((day*24+hour)*60*60*1000))/(60*1000))
				// s
				let scord=(daytime-((day*24*60+hour*60+min)*60*1000))/(1000)<0?0:Math.floor((daytime-((day*24*60+hour*60+min)*60*1000))/(1000))
							 
				return {day,hour,min,min,scord}
			},
			// 获取周月第一天和最后一天
			getweekmouth(){
				// 获取当月的第一天
				const date = new Date();
				const year = date.getFullYear();
				const month = date.getMonth();
				const firstDay = new Date(year, month, 1);
				// 获取当月的最后一天
				const lastDay = new Date(year, month + 1, 0);
				// 获取本周的第一天
				const day = date.getDay();
				const diff = date.getDate() - day + (day === 0 ? -6 : 1);
				const firstDayOfWeek = new Date(date.setDate(diff));
				// 获取本周的最后一天
				const diff2 = date.getDate()  + 6;
				const lastDayOfWeek = new Date(date.setDate(diff2));
				console.log(firstDay,lastDay,firstDayOfWeek,lastDayOfWeek);
				return {firstDay,lastDay,firstDayOfWeek,lastDayOfWeek}
			},
			// 标准时间转为yy-mm-dd
			newDate(time) {
			    var date = new Date(time)
			    var y = date.getFullYear()
			    var m = date.getMonth() + 1
			    m = m < 10 ? '0' + m : m
			    var d = date.getDate()
			    d = d < 10 ? '0' + d : d
			    return y + '-' + m + '-' + d
			},
			timechange(time){
				 //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				  var date = new Date(time);
				  var Y = date.getFullYear();
				  var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth()+1) : date.getMonth() + 1);
				  var D = (date.getDate() < 10 ? '0'+date.getDate() : date.getDate()) + ' ';
				  var h = (date.getHours() < 10 ? '0'+date.getHours() : date.getHours()) + ':';
				  var m = (date.getMinutes() < 10 ? '0'+date.getMinutes() : date.getMinutes())+ ':';
				  var s = (date.getSeconds() < 10 ? '0'+date.getSeconds() : date.getSeconds());
				  return  Y+'-'+ M +'-'+ D + h + m + s;
			},
		}
	}
</script>

<style lang="scss" scoped>
page{
		background-color: #f7f7f7;
	}
	/deep/ .uni-progress-bar {
				// 这主要是加上deep才能改变它原来的样式 
				border-radius: 10px !important;
				overflow: hidden;
			}
			
			 /deep/ .uni-progress-inner-bar {  
			    // 这主要是加上deep才能改变它原来的样式
			    border-radius: 10px !important;
			    overflow: hidden;
				background:linear-gradient(to right, #F137C8, #AA2AF9);
			}
			
			.flex{
				display: flex;
				align-items: center;
			}
			.flex2{
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
			.flex3{
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.marketing{
				font-size: 36rpx;
				font-weight: 700;
			}
			.study{
				font-size: 26rpx;
			}
			.taskTitle{
				background-color: #fff;
				padding: 40rpx 31rpx;
			}
			.Notice{
				font-family: PingFang-SC-Medium;
				font-size: 24rpx;
				color: rgb(101,101,101);
			}
			
			.tab{
				padding:0 30rpx;
				line-height: 70rpx;
				background-color: #fff;
				margin-top: 10rpx;
			}
				
			
			
			.task_list{
				margin: 20rpx 30rpx;
				background-color: #fff;
				padding: 30rpx;
				border-radius: 15rpx;
			}
			.task_title{
				font-family: PingFang-SC-Medium;
				font-size: 30rpx;
				font-weight: 600;
				margin-right: 20rpx;
			}
			.task_label{
				font-family:PingFang-SC-Regular ;
				font-size: 10rpx;
				color: rgb(101,101,101);
				border: 1rpx solid rgb(101,101,101);
				padding: 1rpx 8rpx 0rpx 8rpx;
				border-radius: 10rpx;
			}
			.task_time{
				font-size: 24rpx;
				font-family: PingFang-SC-Regular;
				color: rgb(238,33,45);
				margin: 30rpx 0 29rpx 0;
			}
			.task_Num{
				flex-wrap: wrap;
			}
			.task_num{
				width: 50%;
				margin-top: 19rpx;
			}
			.task_numColor{
				color: rgb(238,33,45);
			}
			
			//任务详情
			.taskD_header{
				margin: 20rpx 30rpx 40rpx 30rpx;
				background-color: #fff;
				padding: 30rpx;
				border-radius: 15rpx;
				box-shadow: 0rpx 0rpx 15rpx #ebebeb;
			}
			.taskD_header_l{
				color: rgb(40,40,40);
				font-family: "PingFang-SC-Bold";
				font-size: 30rpx
			}
			.taskD_header_r{
				color: rgb(101,101,101);
				font-size: 24rpx;
				font-family: "PingFang-SC-Regular"
			}
			.taskD_header_b{
				margin-top: 40rpx;
			}
			.taskD_header_time{
				color: #f8c94e;
				font-size: 24rpx;
				margin: 0 10rpx;
			}
			.taskD_header_button{
				width: 140rpx;
				height: 40rpx;
				color: rgb(255,255,255);
				border-radius: 20rpx;
				font-size: 24rpx;
				padding: 10rpx 0;
				background-image: linear-gradient(270deg ,#f8f07c,#f8c94e);
			}
			
			.show{
				font-size: 24rpx;
				color: rgb(101,101,101);
				font-family: "PingFang-SC-Regular";
				padding:0  30rpx;
			}
			
			//任务完成情况
			.taskD_Number{
				padding: 30rpx 30rpx 60rpx 0;
				margin:40rpx 30rpx 30rpx 30rpx;
				background-color: #fff;
				border-radius: 15rpx;
				box-shadow: 0rpx 0rpx 15rpx #ebebeb;
			}
			.taskD_Number_title{
				font-family: "PingFang-SC-Medium";
			}
			.taskD_Number_title_l{
				border-left: 10rpx solid #f8c94e;
				padding-left: 30rpx;
				font-family: "PingFang-SC-Medium";
				font-weight: 700;
			}
			.taskD_Num{
				padding: 59rpx 61rpx 0 61rpx;
			}
			.taskD_Num_d{
				flex: 1;
				text-align: center;
			}
			.taskD_Num_d view:first-child{
				font-family: "PingFang-SC-Regular";
				color: rgb(40,40,40);
				font-size: 26rpx;
			}
			.taskD_Num_d view:last-child{
				font-family: "PingFang-SC-Regular";
				color: #f8c94e;
				font-size: 48rpx;
				margin-top: 29rpx;
			}
			.icon{
				font-size: 24rpx;
			}
				
			.task_add{
				position: fixed;
				bottom: 124rpx;
				right: 30rpx;
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				font-size: 26rpx;
				color: #fff;
				padding: 22rpx;
				background-image: linear-gradient(270deg,rgb(255,77,87),rgb(238,33,45));
			}
			
			// 指标完成情况
			.complete_box{
				padding: 30rpx 30rpx 60rpx 0;
				margin:40rpx 30rpx 30rpx 30rpx;
				background-color: #fff;
				border-radius: 15rpx;
				box-shadow: 0rpx 0rpx 15rpx #ebebeb;
				
			
			}
			.active{
					border: 2rpx solid #f8c94e;
					
				}
			.complete_iamge{
				margin:40rpx 30rpx 30rpx 30rpx;
				
				background-color: #f6f6f6;
				padding:10rpx
			}
			.complete_iamge_l{
				width: 376rpx;
				height: 220rpx;
				background-color: #f6f6f6;
			}
			.complete_iamge_l_num{
				width: 140rpx;
				height: 140rpx;
				 
			}
			.complete_iamge_l_right{
				
			}
			.complete_iamge_r{
				width: 194rpx;
				height: 200rpx;
				background-color: #f0f0f0;
			}
			.complete{
				margin: 40rpx 30rpx;
				background-color: #fff;
				padding: 20rpx;
			}
			.statistics{
				text-align: center;
				margin-top: 72rpx;
			}
			.complete_l{
				width: 135rpx;
				font-size: 24rpx;
				font-family: "PingFang-SC-Regular";
			}
				
			.complete_l view:first-child{
				color: #f8c94e;
				font-size: 40rpx;
				// font-weight: 700;
				margin-bottom: 15rpx;
			}
			.complete_r{
				flex-wrap: wrap;
			}
			.complete_r_item{
				width: 30%;
				margin-top: 34rpx;
			}
				
			.complete_r_item view:first-child{
				font-family: "PingFang-SC-Regular";
				font-size: 26rpx;
				color: rgb(40,40,40);
			}
			.complete_r_item view:last-child{
				font-family: "PingFang-SC-Medium";
				font-size: 30rpx;
				color: rgb(40,40,40);
				margin-top: 20rpx;
			}
			
			.complete_line{
				height: 120rpx;
				border-left: 4rpx solid #eee;
				margin: 90rpx 20rpx 0 20rpx;
			}
			
			.horizontal_line{
				margin: 40rpx 40rpx ;
				border-top:  4rpx solid #eee;
			}
			.shops{
				margin-bottom: 30rpx;
				font-family: "PingFang-SC-Medium";
				font-size: 26rpx;
			}
			
			//任务完成情况
			.completed_tab{
				padding: 0rpx 60rpx;
				line-height: 70rpx;
				background-color: #fff;
				margin: 10rpx 0;
			}
			.completed_list{
				padding: 30rpx;
				margin: 30rpx;
				border-radius: 10rpx;
				background-color: #fff;
			}
			.completed_item{
				padding: 15rpx 0;
			}
			.completed_num{
				font-size: 26rpx;
				color: rgb(238,33,45);
			}
			.completed_label{
				font-size: 26rpx;
				margin-right: 10rpx;
			}
			
			.selected{
				border-bottom: 6rpx solid rgb(255,0,0);
			}
			
</style>
